<template>
    <div>
        <!-- 头部导航 -->
        <Appnavigatebar :title="`购物车(${cartTotalNum})`" :isshowright="false"></Appnavigatebar>
        <!-- 购物车列表 -->
        <van-empty description="购物车空空如也" v-if="cartList.length == 0" />
        <template v-else>
            <van-swipe-cell v-for="item in cartList" :key="item.cartid">
                <van-checkbox v-model="item.flag" @click='changeOneFn(item.cartid, item.flag)'></van-checkbox>
                <van-card :price="item.originprice.toFixed(2)" :title="item.proname" class="goods-card" :thumb="item.img1">
                    <template #footer>
                        <van-stepper v-model="item.num" @change="changeNumFn(item.num, item.cartid)" theme="round"
                            button-size="22" disable-input />
                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" @click="delCart(item.cartid)" type="danger" class="delete-button" />
                </template>
            </van-swipe-cell>
        </template>
        <!-- 提交订单栏 -->
        <van-submit-bar :price="totalPrice * 100" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checkedAll" @click="checkedAllFn(checkedAll)">全选</van-checkbox>
            <template #tip>
                你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
            </template>
        </van-submit-bar>
    </div>
</template>
<script>
import Appnavigatebar from '@/components/Appnavigatebar.vue';
// 导入接口
import { getcartlistApi } from '@/api/detail'
import {
    checkedAllApi,
    checkedOneApi,
    updateNumApi,
    deleteCartApi
} from '@/api/cart'
export default {
    data() {
        return {
            cartTotalNum: 0, // 购物车种类
            cartList: [],  // 购物车数据
            checkedAll: false // 是否全选
        }
    },
    computed: {
        totalPrice() {
            //
            // let arr = [1, 2, 3, 4, 5]
            // let total = arr.reduce((sum, item) => {
            //     return sum += item
            // }, 0)
            // console.log('total', total);
            return this.cartList.reduce((sum, item) => {

                return item.flag ? sum += item.num * item.originprice : sum
            }, 0)
        }
    },
    components: {
        Appnavigatebar
    },
    created() {
        // 请求购物车数据
        this.getcartlistFn()
    },
    methods: {
        // 获取购物车数据
        getcartlistFn() {
            getcartlistApi({
                userid: this.$store.state.userid
            }).then(res => {
                console.log('res', res);

                if (res.code == 200) {
                    this.cartTotalNum = res.data.length
                    this.cartList = res.data
                } else {
                    this.cartTotalNum = 0
                    this.cartList = []
                }

                // 根据后端返回的cartList 数据,判断当前购物车的全选状态
                if (this.cartList.length > 0) {
                    this.checkedAll = this.cartList.every(item => {
                        return item.flag
                    })
                } else {
                    this.checkedAll = false
                }

            })
        },
        onClickEditAddress() {
            // 修改地址
        },
        onSubmit() {
            // 提交订单
        },
        // 全选和全不选事件
        checkedAllFn(checked) {
            // console.log('checked', checked);
            // 调用全选接口
            checkedAllApi({
                userid: this.$store.state.userid,
                type: checked
            }).then(res => {
                // console.log('res', res);
                //  需要重新请求购物车列表更新页面
                this.getcartlistFn()
            })

        },
        //单选
        changeOneFn(id, checked) {
            // console.log(id, checked);
            checkedOneApi({
                cartid: id,
                flag: checked,
            }).then(res => {
                // console.log('res', res);
                //  需要重新请求购物车列表更新页面
                this.getcartlistFn()
            })
        },
        // ++-- 事件
        changeNumFn(num, id) {
            // console.log(value, detail);
            // 调用+++--接口
            // console.log(num, id);
            updateNumApi({
                cartid: id,
                num: num
            }).then(res => {
                // console.log(res);
                //  需要重新请求购物车列表更新页面
                this.getcartlistFn()
            })
        },
        delCart(id) {
            // console.log(id);
            deleteCartApi({
                cartid: id
            }).then(res => {
                console.log(res);
                //  需要重新请求购物车列表更新页面
                this.getcartlistFn()
            })
        }
    }
}
</script>
<style lang="less" scoped>
@white: white;

.goods-card {
    margin: 0;
    background-color: @white;
}

.delete-button {
    height: 100%;
}

/deep/ .van-swipe-cell__wrapper {
    display: flex;
    padding: 0 5px;
}

/deep/ .van-card {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
</style>